<template>
    <div>
        <el-table ref="multipleTableRef" :data="residentList" style="width: 100%;"
            @selection-change="handleSelectionChange" align="center">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column property="id" label="编号" width="80" align="center" />
            <el-table-column property="residentName" label="姓名" width="80" align="center" />
            <el-table-column property="idnum" label="身份证号码" show-overflow-tooltip align="center" />
            <el-table-column property="tel" label="手机号码" show-overflow-tooltip align="center" />
            <el-table-column property="signStatus" label="签约状态" width="80" align="center">
                <template #default="scope">
                    <span style="color: green;">{{scope.row.signStatus}}</span>
                </template>
            </el-table-column>
            <el-table-column property="tage" label="用户标签" show-overflow-tooltip width="200" align="center">
                <template #default="scope">
                    <el-tag :color="tags.color" :type=tags.type effect="light" round
                        v-for="(tags,index) in scope.row.tage" :key="index">{{tags.value}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="residentStatus" label="居民状态" width="80" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.residentStatus" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="350" align="center">
                <template #default="scope">
                    <el-button type="primary" link @click="toDetail(scope.row.id)">查看详情</el-button>
                    <el-button type="primary" link>编辑</el-button>
                    <el-button type="primary" link>发消息</el-button>
                    <el-button type="primary" link>添加服务</el-button>
                    <el-button type="danger" link>删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script setup lang='ts'>
import axios from 'axios';
import { onMounted, reactive, ref, computed } from 'vue';
import { ElTable } from 'element-plus'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const router = useRouter()
let store = useStore()
store.dispatch('getResidentInfo')
let residentList = computed(() => {
    return store.state.residentList
})


const multipleTableRef = ref<InstanceType<typeof ElTable>>()

const handleSelectionChange = () => {
    console.log(222);

}
const toDetail = (val: number) => {
    router.push({
        path: '/home/residentDetail',
        query: {
            id: val
        }
    })
}
</script>

<style scoped lang='less'>

</style>